﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
	<c:set var="basePath" value="<%=request.getContextPath()%>"/>
	<!-- jsp文件头和头部 -->
	<jsp:include page="../common/common_head.jsp"/>
	<script type="text/javascript" src="${basePath}/js/base/log.js"></script>
	<script type="text/javascript" src="${basePath}/js/base/dialog.js"></script>
	<script type="text/javascript" src="${basePath}/js/sync/sync_list.js"></script>
	<script type="text/javascript" src="${basePath}/js/sync/sync_edit.js"></script>
	
	</head> 
<body>


<div class="container-fluid" style="padding-top: 10px;">

<!-- tab start -->
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#dataBase" data-toggle="tab">
            DataBase
        </a>
    </li>
    <li><a href="#elasticsearch" data-toggle="tab" id="esFlag">Elasticsearch</a></li>
</ul>



<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="dataBase">
	    <!-- dataBase start -->
		<div class="panel panel-success">
        <%--<div class="panel panel-default">--%>
        <!-- <div class="panel-heading">
            <h3 class="panel-title">数据源维护</h3>
        </div> -->
        
        <div class="panel-body" style="padding-bottom: 0px;">
           <form:form action="${basePath}/sync/syncDataSourceList.do?flag=${flag }" method="post" commandName="syncDataSource" id="syncDataSourceForm" class="form-horizontal" style="margin-bottom: 0">
            
               <div class="row">
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="sourceName">数据源名</label>
                            <div class="col-sm-6">
                                <form:input  path="sourceName"  class="form-control" />
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="sourceCode">sourceCode</label>
                            <div class="col-sm-6">
                                <form:input  path="sourceCode" class="form-control" />
                            </div>
                        </div>
                    </div>
                    
                </div>
                
                <div class="row" style="float: right">
                    <div class="col-xs-4">
                        <div class="form-group">
                            <div class="col-sm-3 btn-group" role="group">
                                <form:button type="submit" class="btn btn-success" style="width: 130px;" id=""> 查询</form:button>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <div class="col-sm-3 btn-group" role="group">
                                 <button type="button" class="btn btn-success" style="width: 130px;" data-toggle="modal" data-target="#myModal">新增DB数据源</button>  
                                 
                            </div>
                        </div>
                    </div>
					<div class="col-xs-4">
                        <div class="form-group">
                            <div class="col-sm-3 btn-group" role="group">
                                <a href="${basePath}/sync/syncTemplateList.do" style="width: 130px;"  class="btn btn-success" >返回列表</a>	
                            </div>
                        </div>
                    </div>
                </div>
                    
        </form:form>
        </div>
		
       

        <table class="table table-bordered table-hover">
            <thead>
            <tr class="bg-success">
						
						<th>序号</th>
						<th>类型</th>
						<th>数据源名称</th>
						<th>sourceCode</th>
						<th>driveClass</th>
						<th>jdbcUrl</th>
						<th>userName</th>
						<th>操作</th>
			</tr>
            </thead>
            <tbody>
           	<!-- 开始循环 -->	
				<c:choose>
					<c:when test="${not empty syncDataSources}">
						<c:forEach items="${syncDataSources}" var="syncDataSource" varStatus="vs">
									
							<tr>
								<td>${syncDataSource.sourceId }</td>
								<td>${syncDataSource.sourceType }</td>
								<td>${syncDataSource.sourceName }</td>
								<td>${syncDataSource.sourceCode }</td>	
								<td>${syncDataSource.driveClass }</td>
								<td>${syncDataSource.jdbcUrl }</td>
								<td>${syncDataSource.userName }</td>
								<td><a href="JavaScript:void()"  onclick="updateDataSource('${syncDataSource.sourceCode }')">修改</a>
								|
								<a href="JavaScript:void()"  onclick="deleteDataSource('${syncDataSource.sourceId }')">删除</a>
								</td>
						</c:forEach>
						
					</c:when>
					<c:otherwise>
						<tr class="main_info">
							<td colspan="10" class="center">没有相关数据</td>
						</tr>
					</c:otherwise>
				</c:choose>
				
            </tbody>
        </table>

        <div class="panel-footer">
        	
        	<div class="pagination" style="float: right;padding-top: 0px;margin-top: 0px;">${page.pageStr}</div>
             <div class="pagination" style="margin: 0px">
                
            </div>

            <div class="pagination pull-right" style="margin: 0px">
                
            </div>
            <br/>
            <br/>
        </div>
    </div>
    <!-- dataBase end -->
	</div>
	
	<div class="tab-pane fade" id="elasticsearch">
	  <div class="panel panel-success">
        
        <div class="panel-body" style="padding-bottom: 0px;">
<%--            <form:form action="${basePath}/sync/synElasticsearchList.do" method="post" commandName="syncElasticsearch" id="syncElasticsearcheForm" class="form-horizontal" style="margin-bottom: 0">
 --%>
                <div class="row" style="float: right">
                   <%--  <div class="col-xs-4">
                        <div class="form-group">
                            <div class="col-sm-3 btn-group" role="group">
                                <form:button type="submit" class="btn btn-success" style="width: 130px;" id=""> 查询</form:button>
                            </div>
                        </div>
                    </div> --%>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <div class="col-sm-3 btn-group" role="group">
                                 <button type="button" class="btn btn-success" style="width: 130px;" data-toggle="modal" data-target="#myModal2">新增ES数据源</button>  
                                 
                            </div>
                        </div>
                    </div>
					<div class="col-xs-4">
                        <div class="form-group">
                            <div class="col-sm-3 btn-group" role="group">
                                <a href="${basePath}/sync/syncTemplateList.do" style="width: 130px;"  class="btn btn-success" >返回列表</a>	
                            </div>
                        </div>
                    </div>
                </div>
                    
<%--         </form:form>
 --%>        </div>
		
       

        <table class="table table-bordered table-hover">
            <thead>
            <tr class="bg-success">
						
						<th>序号</th>
						<th>ipPort</th>
						<th>clusterName</th>
						<th>esCode</th>				
						<th>操作</th>
			</tr>
            </thead>
            <tbody>
           	<!-- 开始循环 -->	
				<c:choose>
					<c:when test="${not empty syncElasticsearchList}">
						<c:forEach items="${syncElasticsearchList}" var="syncElasticsearch" varStatus="vs">
									
							<tr>
								<td>${syncElasticsearch.id }</td>
								<td>${syncElasticsearch.ipPort }</td>
								<td>${syncElasticsearch.clusterName }</td>
								<td>${syncElasticsearch.esCode }</td>
								<td><a href="JavaScript:void()"  onclick="updateSyncElasticsearch('${syncElasticsearch.id }')">修改</a>
								|
								<a href="JavaScript:void()"  onclick="deleteSyncElasticsearch('${syncElasticsearch.id }')">删除</a>
								</td>
						</c:forEach>
						
					</c:when>
					<c:otherwise>
						<tr class="main_info">
							<td colspan="10" class="center">没有相关数据</td>
						</tr>
					</c:otherwise>
				</c:choose>
				
            </tbody>
        </table>
        <div class="panel-footer">
        	
        	<div class="pagination" style="float: right;padding-top: 0px;margin-top: 0px;">${page.pageStr}</div>
             <div class="pagination" style="margin: 0px">
                
            </div>

            <div class="pagination pull-right" style="margin: 0px">
                
            </div>
            <br/>
            <br/>
        </div>
    </div>
	</div>
</div>



      
     
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加数据源</h4>
            </div>
            <div class="modal-body">
				<form id="data_source" action="${basePath}/sync/saveDataSource.do" class="form-horizontal" role="form" >
				 <input type="hidden" name = "sourceId">
				  <div class="form-group">
				    <label for="sourceName" class="col-sm-2 control-label">数据源名称</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="sourceName"/>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="sourceCode" class="col-sm-2 control-label">数据源code</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="sourceCode"/>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="sourceType" class="col-sm-2 control-label">类型</label>
				    <div class="col-sm-10">
				      <select name="sourceType" class="form-control" onchange="changeJdbc(this.value)">
				        <option value="">请选择</option>
				      	<option value="mysql">mysql</option>
				      	<option value="oracle">oracle</option>
				      </select>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="jdbcUrl" class="col-sm-2 control-label">jdbc</label>
				    <div class="col-sm-10">
				      <input type="text" name="jdbcUrl" class="form-control" id="jdbcUrl"/>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="userName" class="col-sm-2 control-label">用户</label>
				    <div class="col-sm-10">
				      <input type="text" name="userName" class="form-control" id="userName"/>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="password" class="col-sm-2 control-label">密码</label>
				    <div class="col-sm-10">
				      <input type="password" name="password" class="form-control" id="password"/>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="password" class="col-sm-2 control-label">测试连接</label>
				    <div class="col-sm-10">
				      <a href="javascript:void(0)" onclick="testDataSource()" class="btn btn-info">test</a>
				    </div>
				  </div>
				</form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!--                 <button type="submit" class="btn btn-primary">保存</button>
 -->                <a href="javascript:void(0)" onclick="saveDataSource()" class="btn btn-primary">保存</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
     
     
 <!-- syncElasticsearch -->
 
 <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加数据源</h4>
            </div>
            <div class="modal-body">
				<form id="data_source2" action="${basePath}/sync/saveSyncEs.do" class="form-horizontal" role="form" >
				 <input type="hidden" name = "id">
				  <div class="form-group">
				    <label for="ipPort" class="col-sm-2 control-label">ipPort</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="ipPort"/>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="clusterName" class="col-sm-2 control-label">clusterName</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="clusterName"/>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="esCode" class="col-sm-2 control-label">esCode</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="esCode"/>
				    </div>
				  </div>
				</form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!--                 <button type="submit" class="btn btn-primary">保存</button>
 -->                <a href="javascript:void(0)" onclick="saveSyncElasticsearch()" class="btn btn-primary">保存</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>     
</div>
</body>
</html>
<script type="text/javascript">

$(function () {
	if('${flag}'=='1'){
	    $('#myTab li:eq(0) a').tab('show');
	}else if('${flag}'=='2'){
	    $('#myTab li:eq(1) a').tab('show');

	}
});

function changeJdbc(val){
	if("oracle"==val){
		$("#jdbcUrl").val("jdbc:oracle:thin:@ip:port:database");
	}if("mysql"==val){
		$("#jdbcUrl").val("jdbc:mysql://ip:port/database?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true");

	}
}


function saveSyncElasticsearch(){	
	 $("#data_source2").ajaxSubmit({
			type: 'post',
			url:  '${basePath}/sync/saveSyncEs.do',
			dataType:  'json',
			success: function(data) {	
				if(data.success=="true"){
					alert("保存数据源成功!");
					location.href="${basePath}/sync/syncDataSourceList.do?flag="+2;
				}else{
					if(typeof(data.message) != "undefined"){
						alert(data.message);
					}else{
						alert("保存失败!");
					}
				}
				    
				}
	    });
	
}


function saveDataSource(){	
	 $("#data_source").ajaxSubmit({
			type: 'post',
			url:  '${basePath}/sync/saveDataSource.do',
			dataType:  'json',
			success: function(data) {	
				if(data.success=="true"){
					alert("保存数据源成功!");
					location.href="${basePath}/sync/syncDataSourceList.do?flag="+1;
				}else{
					if(typeof(data.message) != "undefined"){
						alert(data.message);
					}else{
						alert("保存失败!");
					}
				}
				    
				}
	    });
	
}

function testDataSource(){	
	 $("#data_source").ajaxSubmit({
			type: 'post',
			url:  '${basePath}/sync/testDataSource.do',
			dataType:  'json',
			success: function(data) {	
				if(data.success=="true"){
					alert("Connection Successful!");
				}else{
					alert("Connection Failed!");
				}
				    
				}
	    });
	
}

function updateSyncElasticsearch(id){
	$.ajax({
		url:'${basePath}/sync/findEsById.do',
		type:'POST',
		data:{'id':id},
		dataType:'json',
		success:function(data) {
			if(data.success=='true'){
				$("#myModal2").find('input[name="id"]').val(data.syncElasticsearch.id);
				$("#myModal2").find('input[name="ipPort"]').val(data.syncElasticsearch.ipPort);
				$("#myModal2").find('input[name="clusterName"]').val(data.syncElasticsearch.clusterName);
				$("#myModal2").find('input[name="esCode"]').val(data.syncElasticsearch.esCode);

			}
            $("#myModal2").modal('show');

		},
		error:function() {
			alert('系统异常');
		}
	});
}

function updateDataSource(sourceCode){
	$.ajax({
		url:'${basePath}/sync/findBySourceCode.do',
		type:'POST',
		data:{'sourceCode':sourceCode},
		dataType:'json',
		success:function(data) {
			if(data.success=='true'){
				$("#myModal").find('input[name="sourceId"]').val(data.syncDataSource.sourceId);
				$("#myModal").find('input[name="sourceName"]').val(data.syncDataSource.sourceName);
				$("#myModal").find('input[name="sourceCode"]').val(data.syncDataSource.sourceCode);
				$("#myModal").find('select[name="sourceType"]').val(data.syncDataSource.sourceType);
				$("#myModal").find('input[name="jdbcUrl"]').val(data.syncDataSource.jdbcUrl);
				$("#myModal").find('input[name="userName"]').val(data.syncDataSource.userName);
				//$("#myModal").find('input[name="password"]').val(data.syncDataSource.password);
			}
            $("#myModal").modal('show');

		},
		error:function() {
			alert('系统异常');
		}
	});
}



function deleteSyncElasticsearch(id){
	$.ajax({
		url:'${basePath}/sync/deleteEs.do',
		type:'POST',
		data:{'id':id},
		dataType:'json',
		success:function(data) {
			if(data.success=='true'){
				alert("删除成功!");
				window.location = "${basePath}/sync/syncDataSourceList.do?flag="+2;
			}else{
				alert("删除失败!");
			}
			
		},
		error:function() {
			alert('系统异常');
		}
	});
}


function deleteDataSource(sourceId){
	$.ajax({
		url:'${basePath}/sync/deleteDataSource.do',
		type:'POST',
		data:{'sourceId':sourceId},
		dataType:'json',
		success:function(data) {
			if(data.success=='true'){
				alert("删除成功!");
				window.location = "${basePath}/sync/syncDataSourceList.do?flag="+1;
			}else{
				alert("删除失败!");
			}
			
		},
		error:function() {
			alert('系统异常');
		}
	});
}

$('#myTab a').click(function (e) {
	var href = $(this).attr("href");
    if (href == '#elasticsearch') {// 项目基本信息
        location.href = "${basePath}/sync/syncDataSourceList.do?flag=2";
        $("#syncDataSourceForm").attr("action","${basePath}/sync/syncDataSourceList.do?flag=2");
    }else{
    	location.href = "${basePath}/sync/syncDataSourceList.do?flag=1";
        $("#syncDataSourceForm").attr("action","${basePath}/sync/syncDataSourceList.do?flag=1");
    } 
})


</script>


